<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      /*  把padding和border算入宽度 */
      * {
        box-sizing: border-box;
      }

      /* 消除List里的margin和padding */
      ul {
        margin: 0;
        padding: 0;
      }

      /* 设置li样式 */
      ul li {
        cursor: pointer;
        position: relative;
        padding: 12px 8px 12px 40px;
        background: #eee;
        font-size: 18px;
        transition: 0.2s;
        user-select: none; /*用户不能文本选中*/
      }

      /* 奇数li颜色不同，为了美观 */
      ul li:nth-child(odd) {
        background: #f9f9f9;
      }

      /* hover时背景色改变 */
      ul li:hover {
        background: #ddd;
      }

      /* 当被选中，文字中加横线 */
      ul li.checked {
        background: #888;
        color: #fff;
        text-decoration: line-through;
      }

      /* 为被选中的li增加 “对勾” 图标 */
      ul li.checked::before {
        content: '';
        position: absolute;
        border-color: #fff;
        border-style: solid;
        border-width: 0 2px 2px 0;
        top: 10px;
        left: 16px;
        transform: rotate(45deg);
        height: 15px;
        width: 7px;
      }

      /* 关闭按钮样式 */
      .close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 12px 16px 12px 16px;
      }

      .close:hover {
        background-color: #f44336;
        color: white;
      }

      /* 头部样式 */
      .header {
        background-color: #f44336;
        padding: 30px 40px;
        color: white;
        text-align: center;
      }

      /* 清除浮动 */
      .header:after {
        content: '';
        display: table;
        clear: both;
      }

      /* 输入框样式 */
      input {
        border: none;
        width: 75%;
        padding: 10px;
        float: left;
        font-size: 16px;
        outline: 0;
      }

      /* “添加”按钮样式 */
      .addBtn {
        padding: 9px 10px 8px;
        width: 25%;
        background: #d9d9d9;
        color: #555;
        float: left;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
      }

      .addBtn:hover {
        background-color: #bbb;
      }
    </style>
  </head>
  <body>
    <!-- 任务输入框 -->
    <div id="myDIV" class="header">
      <h2>任务清单</h2>
      <input type="text" id="myInput" placeholder="请输入任务" />
      <span id="addButton" class="addBtn">添加</span>
    </div>

    <!-- 任务列表 -->
    <ul id="myUL">
      <li>七点半起床</li>
      <li class="checked">洗漱</li>
      <li>去上班</li>
      <li>完成报表</li>
      <li>和小明吃午饭</li>
      <li>去超市</li>
    </ul>

    <script type="text/javascript">
      ;(function () {
        var i /*index*/

        /*为每个li后面加上关闭按钮*/
        function closeBtn() {
          var myNodelist = document.getElementsByTagName('li')
          for (i = 0; i < myNodelist.length; i++) {
            var span = document.createElement('span')
            var txt = document.createTextNode('\u00D7') /*unicode代码*/
            span.className = 'close'
            span.appendChild(txt)
            myNodelist[i].appendChild(span)
          }
        }

        /*点击关闭按钮，隐藏当前li*/
        function closeElement() {
          var close = document.getElementsByClassName('close')
          for (i = 0; i < close.length; i++) {
            close[i].onclick = function () {
              var div = this.parentElement /*关闭按钮的父元素 - li*/
              div.style.display = 'none'
            }
          }
        }

        /*点击li的时候，加上.checked，再点击则取消*/
        function ifChecked() {
          var list = document.querySelector('ul')
          list.onclick = function (ev) {
            if (ev.target.tagName === 'LI') {
              ev.target.classList.toggle('checked')
            }
          }
        }

        /*点击添加时，创建一个新的ul*/
        function newElement() {
          var li = document.createElement('li')
          var inputValue = document.getElementById('myInput').value
          var t = document.createTextNode(inputValue)
          li.appendChild(t)
          if (inputValue === '') {
            alert('请先输入一个具体任务。')
          } else {
            document.getElementById('myUL').appendChild(li)
          }
          document.getElementById('myInput').value = '' /*清空输入*/
        }

        /*初始化list*/
        function initList() {
          closeBtn()
          closeElement()
          ifChecked()
        }

        /*初始化*/
        function init() {
          var addButton = document.getElementById('addButton')
          initList()

          /*添加按钮点击时执行*/
          addButton.onclick = function () {
            newElement()
            initList()
          }

          /*按回车时亦执行*/
          document.onkeydown = function (event) {
            if (event.keyCode == 13) {
              newElement()
              initList()
            }
          }
        }

        init()
      })()
    </script>
  </body>
</html>
